<template>
  <el-row>
    <el-card style="width: 40vw;min-width: 800px">
      <template #header>
        <el-row>
          <el-col :span="14">灌注符列表</el-col>
          <el-col :span="10">
            <el-radio-group v-model="select_slot" @change="selectBySlot">
              <el-radio-button v-for="s in slot" :key="s" :label="s">
                {{ s }}
              </el-radio-button>
            </el-radio-group>
          </el-col>
        </el-row>
      </template>
      <el-table :data="inlays" row-key="id" height="80vh" fit style="width: 100%;align-items: center;">
        <el-table-column prop="description" label="名称" width="100%"/>
        <el-table-column prop="blood" label="气血" width="60"/>
        <el-table-column prop="coreAttribute" label="核心" width="60"/>
        <el-table-column prop="criticalStrike" label="会心" width="60"/>
        <el-table-column prop="recovery" label="调息" width="60"/>
        <el-table-column prop="expertise" label="专精" width="60"/>
        <el-table-column prop="armorPenetration" label="破甲" width="60"/>
        <el-table-column prop="accuracy" label="命中" width="60"/>
        <el-table-column prop="inlaySlot" label="部位" width="60"/>
        <el-table-column label="操作" width="180px">
          <template #default="scope">
            <el-button type="primary" @click="editInlayDialog=true;currentInlay=scope.row">编辑</el-button>
            <el-button type="danger" style="margin-left: 15px" @click="deleteInlay(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card style="width: 20vw;min-width: 350px;margin-left: 10px" header="添加灌注符">
      <el-form :model="newInlay" label-width="60px" class="center-button-form">
        <el-form-item label="名称：">
          <el-input v-model="newInlay.description"></el-input>
        </el-form-item>
        <el-form-item label="气血：">
          <el-input v-model="newInlay.blood"></el-input>
        </el-form-item>
        <el-form-item label="核心：">
          <el-input v-model="newInlay.coreAttribute"></el-input>
        </el-form-item>
        <el-form-item label="会心：">
          <el-input v-model="newInlay.criticalStrike"></el-input>
        </el-form-item>
        <el-form-item label="调息：">
          <el-input v-model="newInlay.recovery"></el-input>
        </el-form-item>
        <el-form-item label="专精：">
          <el-input v-model="newInlay.expertise"></el-input>
        </el-form-item>
        <el-form-item label="破甲：">
          <el-input v-model="newInlay.armorPenetration"></el-input>
        </el-form-item>
        <el-form-item label="命中：">
          <el-input v-model="newInlay.accuracy"></el-input>
        </el-form-item>
        <el-form-item label="部位：">
          <el-radio-group v-model="newInlay.inlaySlot">
            <el-radio-button v-for="s in edit_slot" :key="s" :label="s">
              {{ s }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="saveInlay" style="width: 100%;margin-left: -3em">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-row>


  <el-dialog v-model="editInlayDialog" width="40%" title="编辑灌注符">
    <span>
      <el-form :model="currentInlay" label-width="100px" class="center-button-form">
        <el-form-item label="境界名称：">
          <el-input v-model="currentInlay.description"></el-input>
        </el-form-item>
         <el-form-item label="气血：">
          <el-input v-model="currentInlay.blood"></el-input>
        </el-form-item>
         <el-form-item label="核心属性：">
          <el-input v-model="currentInlay.coreAttribute"></el-input>
        </el-form-item>
         <el-form-item label="会心：">
          <el-input v-model="currentInlay.criticalStrike"></el-input>
        </el-form-item>
         <el-form-item label="调息：">
          <el-input v-model="currentInlay.recovery"></el-input>
        </el-form-item>
         <el-form-item label="专精：">
          <el-input v-model="currentInlay.expertise"></el-input>
        </el-form-item>
        <el-form-item label="破甲：">
          <el-input v-model="currentInlay.armorPenetration"></el-input>
        </el-form-item>
        <el-form-item label="命中：">
          <el-input v-model="currentInlay.accuracy"></el-input>
        </el-form-item>
         <el-form-item label="部位：">
          <el-radio-group v-model="currentInlay.inlaySlot">
            <el-radio-button v-for="s in edit_slot" :key="s" :label="s">
              {{ s }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editInlayDialog = false">取消</el-button>
        <el-button type="primary" @click="editInlay">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>
<script>
import {http} from "api/axios.js"
import {ref} from "vue";
import {ElMessage} from "element-plus";

export default {
  setup() {
    const slot = ref(["全部", "头部", "手部", "腰部", "上身"])
    const edit_slot = ref(["头部", "手部", "腰部", "上身"])
    const select_slot = ref("全部")
    const inlays = ref();
    const currentInlay = ref();
    const newInlay = ref({
      "coreAttribute": 0,
      "blood": 0,
      "criticalStrike": 0,
      "recovery": 0,
      "expertise": 0,
      "armorPenetration": 0,
      "accuracy": 0,
      "inlaySlot": "",
      "partType": 0,
      "description": ""
    });

    const editInlayDialog = ref(false)


    // 修改 getAllInlays 函数，使其返回 Promise
    const getAllInlays = () => {
      return http.get("/inlay/all")
          .then((response) => {
            inlays.value = response.data['data'];
            return response.data['data'];
          })
          .catch((error) => {
            console.error('请求出错:', error);
            ElMessage({
              type: 'error',
              message: '获取灌注符列表失败，请稍后重试',
            });
            throw error; // 抛出错误，以便调用者可以捕获
          });
    };

    // 根据部位筛选灌注符
    const selectBySlot = async () => {
      if (select_slot.value !== "全部") {
        await getAllInlays();
        for (let i = inlays.value.length - 1; i >= 0; i--) {
          if (inlays.value[i].inlaySlot !== select_slot.value) {
            inlays.value.splice(i, 1);
          }
        }
      } else {
        await getAllInlays();
      }
    };


    const editInlay = () => {
      console.log(currentInlay)
      return http.post("/inlay/update", currentInlay.value).then((res) => {
        console.log(res)
        ElMessage({
          type: 'success',
          message: "修改成功"
        })
        editInlayDialog.value = false
      })
    }

    const deleteInlay = (row) => {
      http.post(" /inlay/delete", row).then((res) => {
        if (res.data['code'] === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          selectBySlot()
        }
      })
    }


    const saveInlay = () => {
      return http.post("/inlay/add", newInlay.value).then((res) => {
        console.log(res)
        ElMessage({
          type: 'success',
          message: "保存"
        })
      })
    }


    getAllInlays()
    return {
      slot,
      edit_slot,
      select_slot,
      selectBySlot,

      inlays,
      getAllInlays,

      editInlay,
      deleteInlay,
      newInlay,

      editInlayDialog,
      currentInlay,
      saveInlay,
    }
  }
}
</script>


<style scoped>

</style>